<template>
  <ContentWrap>
    <!--    顶部查询项-->
    <el-form :model="form" class="m-b-10" inline>
      <el-form-item :label="t('expandCustomer.country')">
        <el-input
          v-model="form.country"
          clearable
          :placeholder="t('expandCustomer.country')"
          style="width: 250px"
        />
      </el-form-item>
      <el-form-item :label="t('expandCustomer.city')">
        <el-input
          v-model="form.city"
          clearable
          :placeholder="t('expandCustomer.city')"
          style="width: 250px"
        />
      </el-form-item>
      <el-form-item :label="t('expandCustomer.keywords')">
        <el-input
          v-model="form.keywords"
          clearable
          :placeholder="t('expandCustomer.keywords')"
          style="width: 250px"
        />
      </el-form-item>
      <el-form-item :label="t('expandCustomer.dataSourcePlatform')">
        <el-input
          v-model="form.source"
          clearable
          :placeholder="t('expandCustomer.dataSourcePlatform')"
          style="width: 250px"
        />
      </el-form-item>
      <el-form-item :label="t('expandCustomer.crawlTime')">
        <el-date-picker
          v-model="form.date"
          type="daterange"
          range-separator="-"
          start-placeholder="起始时间"
          end-placeholder="结束时间"
          @change="changeTime"
          :editable="false"
          unlink-panels
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="initialize">查询</el-button>
        <el-button icon="Refresh" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格主体 -->
    <el-table
      :data="dataList"
      highlight-current-row
      stripe
      border
      v-loading="tableLoading"
      :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ textAlign: 'center' }"
    >
      <el-table-column :label="t('expandCustomer.serialNumber')" prop="id" min-width="70" />
      <el-table-column
        :label="t('expandCustomer.country')"
        prop="country"
        min-width="200"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        :label="t('expandCustomer.city')"
        prop="city"
        min-width="200"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        :label="t('expandCustomer.dataSourcePlatform')"
        prop="source"
        min-width="200"
        :show-overflow-tooltip="true"
      />
      <el-table-column prop="link" :label="t('expandCustomer.thirdPartyUserIDs')">
        <template #default="{ row }">
          <ElLink type="primary" :href="row.user_link" target="_blank"
            >{{ t('expandCustomer.jump') }}
          </ElLink>
          <ElButton
            link
            class="m-l-4"
            type="primary"
            @click="(copy(row.user_id) as any) && ElMessage.success('复制成功')"
          >
            {{ t('expandCustomer.replication') }}
          </ElButton>
        </template>
      </el-table-column>
      <!--      <el-table-column-->
      <!--        :label="t('expandCustomer.thirdPartyUsernames')"-->
      <!--        prop="user_name"-->
      <!--        min-width="200"-->
      <!--        :show-overflow-tooltip="true"-->
      <!--      />-->
      <el-table-column
        :label="t('expandCustomer.finallyCatchTheTime')"
        prop="last_crawl_time"
        min-width="200"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        :label="t('expandCustomer.keywords')"
        prop="keywords"
        min-width="200"
        :show-overflow-tooltip="true"
      />
      <!--      <el-table-column-->
      <!--        :label="t('expandCustomer.label')"-->
      <!--        prop="tags"-->
      <!--        min-width="200"-->
      <!--        :show-overflow-tooltip="true"-->
      <!--      />-->
      <el-table-column fixed="right" label="操作" width="180">
        <template #default="{ row }">
          <el-button @click="handleDetail(row)" size="small" type="success">
            {{ t('expandCustomer.details') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--    分页-->
    <Pagination
      :total="paginationTotal"
      v-model:page="form.pageIndex"
      v-model:limit="form.pageSize"
      @pagination="initialize"
    />
  </ContentWrap>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import Pagination from '@/components/Pagination/index.vue'
import { ContentWrap } from '@/components/ContentWrap'
import { getListApi } from '@/api/expandCustomer'
import { ElButton, ElLink, ElMessage } from 'element-plus'
import { useClipboard } from '@vueuse/core'

const { t } = useI18n()
const { copy } = useClipboard()
const { push } = useRouter()

const tableLoading = ref<boolean>(false)
const dataList = ref<any[]>([])
const paginationTotal = ref<number>(0)
const form = ref<Record<string, any>>({
  date: [],
  start_time: '',
  end_time: '',
  country: '',
  city: '',
  source: '',
  keywords: '',
  pageIndex: 1,
  pageSize: 20
})

//格式化时间
const changeTime = (e: Date[]) => {
  if (e && e.length > 0) {
    form.value.start_time = dayjs(e[0]).format('YYYY-MM-DD 00:00:00')
    form.value.end_time = dayjs(e[1]).format('YYYY-MM-DD 23:59:59')
  } else {
    form.value.start_time = null
    form.value.end_time = null
  }
}

//点击详情
const handleDetail = (row: Record<string, any>) => {
  push({ path: '/customer/expandCustomer/detail', query: { id: row.id } })
}

//初始化请求
const initialize = async () => {
  tableLoading.value = true
  const params = JSON.parse(JSON.stringify(form.value))
  delete params.date
  const resp = await getListApi(params)
  dataList.value = resp.data.list
  paginationTotal.value = resp.data.total
  tableLoading.value = false
}

//重置查询项
const reset = () => {
  form.value = {
    date: [],
    start_time: '',
    end_time: '',
    country: '',
    city: '',
    source: '',
    keywords: '',
    pageIndex: 1,
    pageSize: 20
  }
  paginationTotal.value = 0
  initialize()
}

onMounted(() => {
  initialize()
})
</script>

<style lang="less" scoped></style>
